<template>
  <div class="wf-pagination-container">
    <div class="wf-pagination-wrapper">
      <el-pagination
        :background="background"
        :current-page="current"
        :page-size="size"
        :layout="layout"
        :page-sizes="pageSizes"
        :total="total"
        v-bind="$attrs"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'WfPagination',
    props: {
      total: {
        required: true,
        type: Number,
      },
      current: {
        type: Number,
        default: 1,
      },
      size: {
        type: Number,
        default: 10,
      },
      pageSizes: {
        type: Array,
        default() {
          return [10, 20, 30, 50];
        },
      },
      layout: {
        type: String,
        default: 'total, prev, pager, next, jumper',
      },
      background: {
        type: Boolean,
        default: true,
      },
      autoScroll: {
        type: Boolean,
        default: true,
      },
      hidden: {
        type: Boolean,
        default: false,
      },
    },
    methods: {
      handleSizeChange(val) {
        this.$emit('on-change', { current: this.current, size: val });
      },
      handleCurrentChange(val) {
        this.$emit('on-change', { current: val, size: this.size });
      },
    },
  };
</script>

<style lang="scss">
  .wf-pagination-container {
    text-align: center;
    height: 70px;
    padding: 16px;
    background-color: #ffffff;
    // .el-pagination__total {
    //   color: #a7a7a9;
    // }
    // .el-pagination {
    //   color: #a7a7a9;
    // }
    // .el-pagination__jump {
    //   color: #a7a7a9;
    // }
  }
</style>
